<extend name="Common:base" />
<block name="head">
  <style>
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
		#edit .el-dialog__body {
		    padding: 20px 20px;
		    color: #475669;
		    font-size: 14px;
		}
		#edit .el-dialog__footer {
		    padding: 0px 20px 15px;
		    margin-bottom:30px;
		    text-align: right;
		    box-sizing: border-box;
		}
    .container > .wrapp > .el-row {
      margin-bottom: 6px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display: none">
			<!-- seach form -->
			<el-row>
				<el-col :span="24">
					<el-form :inline="true"  ref="searchForm" :model="searchForm">
					<!-- 	<el-form-item prop="department_id" style="width: 120px">
						<el-select v-model="searchForm.department_id" size="small" clearable @change="departmentChange" width="50" placeholder="部门">
							<el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item> -->
						<el-form-item prop="kinds" style="width: 140px">
							<el-select v-model="searchForm.kinds" size="small" clearable placeholder="所属分类">
								<el-option v-for="item in kindsType" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item prop="name">
							<el-input v-model="searchForm.name" size="small" placeholder="请输入查询数据"></el-input>
						</el-form-item>
					  <el-form-item> 
					    <el-button type="primary" size="small" icon="search" @click="loadDatalist">查询</el-button>
					    <el-button @click="searchReset" size="small" style="margin-left:10px;">重置</el-button>
					  </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<!-- / search form -->

			<!-- datatables  -->
			<!-- 勾选用这个:@selection-change="handleSelectionChange";点击选中用@row-click="handleSelectionChange" -->
			<el-row>
				<el-col :span="24">
					<el-table 
					  :data="dataList" 
				      v-loading="dataLoad" 
				      element-loading-text="{:L('DATA_LOGIN')}"
				      highlight-current-row
				      @row-click="handleSelectionChange" @row-dblclick="showDetail"
					 border>
					    <el-table-column  label="序号"  width="70" :formatter="handleIndex" >
					    </el-table-column>
					  <!--     <el-table-column prop="department_id"  label="部门" width="100">
					  					    	<template scope="scope">
					      {{ getType(scope.row.department_id, 'departmentsList') }}
					    </template>
					  					    </el-table-column> -->
					    <el-table-column prop="name" label="物品名字" width="200" >
					    </el-table-column>
					     <el-table-column prop="pid"  label="所属分类" width="200">
					    	 <template scope="scope">
					          {{ getType(scope.row.pid, 'kindsList') }}
					        </template>
					    </el-table-column>
					    <el-table-column prop="unit"  label="单位" width="200">
					    </el-table-column>
					    <el-table-column prop="specification"  label="规格" width="200" align="center">
					    </el-table-column>
					   <el-table-column prop="property" label="属性" width="200">
					   		 <template scope="scope">
					          {{ getType(scope.row.property, 'propertyList') }}
					        </template>
					   </el-table-column>
					    <el-table-column prop="created_at" label="创建时间" width="190" align="center">
					    </el-table-column>
					    {$viewDecorator['oprate']}

				    </el-table>
				</el-col>
			</el-row>
			<!-- / datatables  -->
			
			<!-- toolbar -->
				<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
				  <el-col :span="12">
				  <div class="grid-content bg-purple">
				  		<el-button-group>
				  		<el-button size="small"  @click="openDialog('add')"  type="primary">添加信息</el-button>
				    </el-button-group>
				  </div>
				  </el-col>
				  <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right">
				    <!-- page -->
				    <include file="Common:_pagination" />
				    <!-- / page -->
				    
				  </div></el-col>
				</el-row>
			<!-- / toolbar -->
		</div>
		
		<div class="dialogWrapper" v-show="show" style="display: none">
			<!-- 添加 -->
			<include file="_add" />
			<!-- / 添加 -->

			<!-- 编辑 -->
			<include file="_edit" />
			<!-- / 编辑 -->
			<include file="_detail" />
		</div>

	</div>
</block>
<block name="scripts">
	<script>
		window.defaultOption.setDatas({
			kindsList:{:json_encode($kindsList)},
			kindsType:{:json_encode($kindsType)},
			propertyList:{:json_encode($propertyList)},
			propertyType:{:json_encode($propertyType)},
			departmentsList:{:json_encode($departmentsList)},
			detailFormDialog:false,
            showDetailList:[],
            multipleSelection:[],
			addRules:{
				name:[
					{ required: true, message: '请输入物品名字', trigger: 'blur' }
				]
			},
			editRules:{
				name:[
					{ required: true, message: '请输入物品名字', trigger: 'blur' }
				]
			},
			departments:{:json_encode($departments['list'])},
		    groups:{:json_encode($departments['group'])},
		}).setForm('add',{
			name:"",
			pid:"",
			unit:"",
			specification:"",
			property:"",
			department_id:""
		}).setForm('edit',{
			id:"",
			name:"",
			pid:"",
			unit:"",
			specification:"",
			property:"",
			department_id:""
		}).setForm('search',{
			department_id:{:json_encode($departments['account'][0]['id'])},
			kinds:"",
			name:""
		}).setMethod('getType', function(type, field){
			return this[field][type];
		}).setMethod('handleSelectionChange', function(val){
	  	  //this.multipleSelection = val; //点击勾选用这个
        //点击选中用这个 开始
         this.deleteArrAllItem('multipleSelection');
        this.multipleSelection.push(val) ;
        //点击选中用这个 结束
	    
	  }).setForm('detail',{
			realname:"",
		}, true).setMethod('showDetail', function(row){
	    //this.account = row.account;
	    this.showDetailList = row;
	    this.openDialog('detail');
	  });
	</script>
</block>
